<!-- 配置 - 本地 -->
<script setup>
import { reactive } from 'vue'
const form = reactive({
  protocolType: 'TCP',
})

const selectDir = async () => {
  console.log('打开文件夹')
  try {
    // 拿到选择的文件内容
    const dir = await window.showDirectoryPicker({
      id: 'choose-dir',
      startIn: 'downloads',
    })
    console.log(dir)
    // const iter = await dir.entries()
    // console.log('iter', iter)
    // const root = await dir.getDirectoryHandle(dir)
    // console.log('root', root)

    const iters = await dir.entries()
    for await (const info of iters) {
      console.log(info)
    }

    // const file = await root.children[root.children.length - 3].getFile()
    // const reader = new FileReader()
    // reader.onload = (e) => {
    //   console.log(e.target.result)
    // }
    // reader.readAsText(file, 'utf-8')
  } catch (error) {
    // 用户拒绝浏览器访问用户信息
    console.log(error)
  }
}
</script>
<template>
  <div class="local-content">
    <ElDivider content-position="left">播放参数</ElDivider>
    <ElForm :model="form" label-width="120px">
      <ElFormItem label="协议类型">
        <ElRadioGroup v-model="form.protocolType">
          <ElRadio label="TCP" value="TCP"></ElRadio>
          <ElRadio label="UDP" value="UDP"></ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="码流类型">
        <ElRadioGroup v-model="form.protocolType">
          <ElRadio label="主码流" value="主码流"></ElRadio>
          <ElRadio label="子码流" value="子码流"></ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="播放性能">
        <ElRadioGroup v-model="form.protocolType">
          <ElRadio label="最短延时" value="最短延时"></ElRadio>
          <ElRadio label="均衡" value="均衡"></ElRadio>
          <ElRadio label="流程性好" value="流程性好"></ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="解码类型">
        <ElRadioGroup v-model="form.protocolType">
          <ElRadio label="软解码" value="软解码"></ElRadio>
          <ElRadio label="硬解码" value="硬解码"></ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="规则信息">
        <ElRadioGroup v-model="form.protocolType">
          <ElRadio label="启用" value="启用"></ElRadio>
          <ElRadio label="禁用" value="禁用"></ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="算法信息">
        <ElRadioGroup v-model="form.protocolType">
          <ElRadio label="启用" value="启用"></ElRadio>
          <ElRadio label="禁用" value="禁用"></ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="图像尺寸">
        <ElRadioGroup v-model="form.protocolType">
          <ElRadio label="充满" value="充满"></ElRadio>
          <ElRadio label="4:3" value="4:3"></ElRadio>
          <ElRadio label="16:9" value="16:9"></ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="抓图文件格式">
        <ElRadioGroup v-model="form.protocolType">
          <ElRadio label="JPEG" value="JPEG"></ElRadio>
          <ElRadio label="BMP" value="BMP"></ElRadio>
        </ElRadioGroup>
      </ElFormItem>
    </ElForm>
    <ElDivider content-position="left">录像文件</ElDivider>
    <ElForm :model="form" label-width="120px">
      <ElFormItem label="录像文件打包大小">
        <ElRadioGroup v-model="form.protocolType">
          <ElRadio label="256M" value="256M"></ElRadio>
          <ElRadio label="515M" value="515M"></ElRadio>
          <ElRadio label="1G" value="1G"></ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="录像文件保存路径">
        <div class="flex">
          <ElInput v-model="form.protocolType" class="w-350px"></ElInput>
          <ElButton type="default" class="m-l-20px" @click="selectDir">浏览</ElButton>
        </div>
      </ElFormItem>
      <ElFormItem label="回放下载保存路径">
        <div class="flex">
          <ElInput v-model="form.protocolType" class="w-350px"></ElInput>
          <ElButton type="default" class="m-l-20px" @click="selectDir">浏览</ElButton>
        </div>
      </ElFormItem>
    </ElForm>
    <ElDivider content-position="left">抓图和剪辑</ElDivider>
    <ElForm :model="form" label-width="120px">
      <ElFormItem label="预览抓图保存路径">
        <div class="flex">
          <ElInput v-model="form.protocolType" class="w-350px"></ElInput>
          <ElButton type="default" class="m-l-20px" @click="selectDir">浏览</ElButton>
        </div>
      </ElFormItem>
      <ElFormItem label="图片下载保存路径">
        <div class="flex">
          <ElInput v-model="form.protocolType" class="w-350px"></ElInput>
          <ElButton type="default" class="m-l-20px" @click="selectDir">浏览</ElButton>
        </div>
      </ElFormItem>
      <ElFormItem label="场景图片保存路径">
        <div class="flex">
          <ElInput v-model="form.protocolType" class="w-350px"></ElInput>
          <ElButton type="default" class="m-l-20px" @click="selectDir">浏览</ElButton>
        </div>
      </ElFormItem>
      <ElFormItem label="回放抓图保存路径">
        <div class="flex">
          <ElInput v-model="form.protocolType" class="w-350px"></ElInput>
          <ElButton type="default" class="m-l-20px" @click="selectDir">浏览</ElButton>
        </div>
      </ElFormItem>
      <ElFormItem label="回放剪辑保存路径">
        <div class="flex">
          <ElInput v-model="form.protocolType" class="w-350px"></ElInput>
          <ElButton type="default" class="m-l-20px" @click="selectDir">浏览</ElButton>
        </div>
      </ElFormItem>
    </ElForm>
    <ElButton type="primary" class="m-l-50px w-200px">保存</ElButton>
  </div>
</template>

<style scoped>
.local-content :deep(.el-input) {
  width: 350px;
}
</style>